<template lang="pug">
.listBox(@click="onTab")
  .header
    span {{contentList.buyer_name}}
    span {{setPhone}}
  .content
    p {{contentList.buyer_address}}
    p {{contentList.area_code}}
    //- img(src="../../src/assets/zuo.png", alt="alt")
  .footer
    button()
</template>
<script>
export default {
  props:["contentList"],
  computed:{
    setPhone(){
      return this.contentList.buyer_phone.slice(0,3) + "****" + this.contentList.buyer_phone.slice(7,11)
      // console.log
    }
  },
  methods:{
    onTab(){
      this.$emit("onTap",this.contentList.address_id)
    }
  },
  mounted(){
    console.log(this.contentList)
  }
};
</script>
<style lang="sass" scoped>
.listBox
  width: 100%
  height: 1rem
  border: 1px solid #ccc
  box-sizing: border-box
  border-radius: 8px
  margin-bottom: .15rem
  .header
    height: .35rem
    padding: 0 .2rem
    border-bottom: 1px solid #ccc
    display: flex
    align-items: center
    span
      font-size: .15rem
      color: rgb(255,103,0)
      font-weight: bold
    span+span
      margin-left: .15rem
      display: inline-block
      font-size: .14rem
      color: #000
      font-weight: 300
  .content
    padding: .1rem .15rem
    position: relative
    p
      width: 100%
      height: .2rem
      font-size: .14rem
      font-weight: bold
    p+p
      font-weight: 500
    img
      width: .15rem
      height: .15rem
      transform: rotate(180deg)
      position: absolute
      top: 50%
      margin-top: -.075rem
      right: 0.15rem

</style>
rgb(246,246,246)
